<template>
  <!-- el-container 容器  ;el-aside容器侧边栏；el-header容器头部- el-main主要部分（自适应）
       el-button按钮；  el-menu菜单；el-menu-item菜单项  el-icon 图表 ； <template #title>标题插槽
       setting Document Location 图表
       isCollapse 是否折叠左侧
       el-menu   default-active默认选择  :collapse=是否折叠 @open @close监听打开关闭事件 router把index当路径
       
  -->
  <div class="common-layout">
    <el-container>
      <el-aside width="200px" :style="{width:isCollapse?'64px':'200px'}">
          <el-button @click="isCollapse = !isCollapse">
              <span v-if="isCollapse">展开</span>
              <span v-else>折叠</span>
          </el-button>
        <el-menu default-active="/admin/dash"   :collapse="isCollapse" @open="handleOpen"
          @close="handleClose" router>
          <el-menu-item index="/admin/dash">
            <el-icon> <setting /> </el-icon>
            <template #title>概览</template>
          </el-menu-item>
          <el-menu-item index="/admin/produce/produceList">
            <el-icon> <Document /> </el-icon>
            <template #title>商品列表</template>
          </el-menu-item>
          <el-menu-item index="/admin/produce/addProduce">
            <el-icon> <Location/> </el-icon>
            <template #title>添加商品</template>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>
          <RouterView></RouterView>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { RouterView } from 'vue-router'
import {
  Document, 
  Location,
  Setting,
} from '@element-plus/icons-vue'

const isCollapse = ref(true)
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
</script>

<style lang="scss" scoped>

</style>